<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>fullCalendar</title>

    <link rel="stylesheet" href="/fullcalendar-3.9.0/fullcalendar.print.css"  media='print' />
    <link rel="stylesheet" href="/fullcalendar-3.9.0/fullcalendar.css" />
    <th:block th:include="common/common :: header"/>
    <th:block th:include="common/common :: footer"/>

    <script src="/fullcalendar-3.9.0/lib/jquery.min.js"></script>
    <script src="/fullcalendar-3.9.0/lib/moment.min.js"></script>
    <script src="/fullcalendar-3.9.0/lib/jquery-ui.min.js"></script>
    <script src="/fullcalendar-3.9.0/fullcalendar.js"></script>
    <!--这个语言包需要放到最后，否则前边的加载项没有加载到，这个语言包就加载不了-->
    <script src="/fullcalendar-3.9.0/locale-all.js"></script>

    <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.print.css"></script>-->
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>

</head>
<body>
<button class="layui-btn" onclick="render()">btn</button>
<button class="layui-btn" onclick="destory()">destory</button>
<button class="layui-btn" onclick="businessHours()">businessHours</button>
<button class="layui-btn" onclick="reRender()">reRender</button>
<div style="background: #fff; margin-top: 0px; padding: 15px"
     class="opportunity-kcuser-canvas">
    <div id="main">
        <div id='top'>
            Locales: <select id='locale-selector'></select>
        </div>
        <div id='calendar'></div>
    </div>
</div>
</body>

<script>

    $(document).ready(function() {
        var initialLocaleCode = 'zh-cn';

        $('#calendar').fullCalendar({
            customButtons: {
                myCustomButton: {
                    text: '自定义按钮',
                    click: function() {
                        alert('点击了自定义按钮!');
                    }
                } , myCustomButton2: {
                    text: '自定义按钮',
                    click: function() {
                        alert('点击了自定义按钮!');
                    }
                }
            },
            //头工具栏，三个位置，左中右，https://www.helloweba.net/javascript/447.html#fc-header  有固定参数。
            header: {
                left: 'prev,next today myCustomButton myCustomButton2',
                center: 'title',
               right: 'agendaWeek,month,agendaDay'
                //right : 'agendaWeek,agendaDay,listMonth'
            },
            locale:initialLocaleCode,
            defaultView : 'agendaWeek',//周视图
           /* defaultDate: new Date()/!* '2018-11'*!/, //默认时间，
            defaultView:'month', //默认视图*/
            editable: true,//可以被编辑
            weekNumbers:true,//显示周数
            selectable: true,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
           // firstDay: 1,//设置每周第一天，数字int型，默认0（周日）
            navLinks : true, // can click day/week names to navigate views
            timezone: 'local',//时区
            timeFormat: 'HH:mm:ss',//时间格式
            eventLimit: true, // allow "more" link when too many events
            loading: function( isLoading, view ){
                //暂时这里没有看到效果
                console.log("loading回调",view)
            },
            businessHours: {
                //强调日历中的某些时间段
                //强调的时间是白色，不强调的是灰色
                dow: [ 1, 2, 3, 4 ], // 周一 - 周四

                start: '10:00', // 上午10点开始
                end: '18:00', // 下午18点结束
            },
            /* eventSources : [ '/schedule/scheduleData?teacher='+id ],  允许使用url传值，拿到结果还有三个参数，开始结束时间和另一个参数：teacher=1585  start=2018-12-24T00:00:00  end=2018-12-31T00:00:00  _=1545877383476  ,*/
            //这里是在events中执行回调，渲染数据
            events : function(start, end,timezone, callback) {
                    console.log(start + "=====" + end)
					console.log('start:'+start.unix()+',end:'+end.unix())
                    var startTime = $.fullCalendar.formatDate(start, "yyyy-MM-dd");
                    var endTime = $.fullCalendar.formatDate(end, "yyyy-MM-dd");

                    console.log("时间：",startTime);
                    console.log("时间：",endTime);

                    $.post("/full/getData",
                            {
                                "flag" : "0"
                                } , function(json){

                                    callback(json)

                                });
            },
           /* events: [  //日历显示的事件，数组形式显示的
                {
                    title: 'All Day Event',
                    start: '2018-11-01',
                    color:'red'//不同事件不同颜色
                },
                {
                    title: 'Long Event',
                    start: '2018-11-07',
                    end: '2018-11-10',
                    colorl:'blue'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2018-11-09T16:00:00',
                    color:'#30ff18'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2018-11-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2018-11-11',
                    end: '2018-11-13'
                },
                {
                    title: 'Meeting',
                    start: '2018-11-12T10:30:00',
                    end: '2018-11-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2018-11-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2018-11-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2018-11-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2018-11-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2018-11-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2018-11-28'
                },
                {
                    title: 'Click forzzzz Google',
                    url: 'http://google.com/',
                    start: '2019-1-1',
                    color:'red'
                },
                {
                    title: 'Click forzzzz Google',
                    url: 'http://google.com/',
                    start: '2019-1-1',
                    color:'#FFFFFF',
                    rendering: 'background',
                },
                {
                    /!*作为背景色渲染*!/
                    start: '2019-1-1T00:00:00',
                    end:"2019-1-1T23:59:59",
                    color:'#ff9f89',
                    overlap:false,//true或false，可选。覆盖当前事件的eventOverlap选项。设置为false，则阻止此事件被拖动/调整为其他事件。 还可以防止其他事件在此事件中被拖动/调整大小。
                    rendering: 'background',//允许渲染事件，如背景色等。可以为空，也可以是"background", or"inverse-background"
                }
            ],*/
            eventMouseover: function( event, jsEvent, view ) { //鼠标划过的事件
                layer.tips(event.title, this);
            },
            eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
                var index = layer.tips();
                layer.close(index);
            },
            selectAllow : function(clickInfo) {//禁止点击的控制,是否允许点击false不让点击，  将用户选择限制到某些时间窗口。仅当selectable选项是激活状态时可用。值为事件id或对象。
                var start = clickInfo.start.unix();//获取点击的开始时间
                console.log("点击是否允点击");
                console.log("点击的时间和今天的时间：" +  new Date() + "---" + start);
                console.log("点击的时间和今天的时间：" +  (clickInfo.start >= new Date()));
                //如果大于当前时间就让点击，
                if(clickInfo.start >= new Date()){
                    return true;
                }
                //不让点击了 就不让点击，提示
                layer.msg("选择时间小于当前时间，不可以点击过去的时间");
                return false;
            },
            select:function(start, end, jsEvent) {  //点击日历上的某个时间触发的函数
                //layer.msg("点击时间控件" + JSON.stringify(jsEvent));
                /*
                执行顺序，先执行selectAllow:判断是否可以点击
                然后执行select:点击了时间空间出发的事件，这两个控件其实感觉在上边的那个里边写逻辑就可以
                如果可以执行的事件，就在上边那个里边直接写，不可以执行的，就直接提示反馈fase，这样就不可以点击了。
                 */
                layer.msg("点击时间控件");
            },
            dayClick: function (date, jsEvent, view) {
                var threshold = new Date();
                // var time = new Date(date.format());
                //直接new  date()  safari浏览器会出现时区问题。这里使用字符串拼接形式，然后转化
                var dateStr = date.format().replace("T", " ").replace(/-/g, "/");
                var time = new Date(Date.parse(dateStr));

                if (time.getTime() < threshold.getTime()) {
                    //小于当前时间不让点击
                    return false;
                } else {
                    //添加
                }
            },
            eventClick: function(calEvent, jsEvent, view) {//点击日期控件上显示的事件触发的事件
                layer.msg("我点击的是：11" +  calEvent.title );
                console.log("我点击的是",calEvent);

                var currentTime = new Date();
                //如果后段没有传end结束时间，那么这里会报错，但是这里默认是全天的。需要处理
                var endTime = calEvent.end;
                if(endTime == null){
                    //这个是没有写结束时间的，只有开始时间，默认是全天 23：59：59
                    endTime = new Date().Format("yyyy-MM-dd") + " 23:59:59";
                    console.log("全天时间的拼接：" + endTime)
                }
                var time = new Date(Date.parse(endTime));

                //目的：如果这个事件的结束事件小于现在，那么这个事件已经属于过去，不让用户更改
                if (time.getTime() < currentTime.getTime()) {
                    //小于当前时间不让点击
                    console.log("小于当前时间不可以点击了");
                    return false;
                }
            },
            eventAfterRender: function(event, element, view) {
               // 回调函数，当日程事件被渲染到日程表后触发：
                element.css("background-color", "#54a4ff");
                element.css("border-color", "#54a4ff");
                console.log("日程渲染回调：" , event)
            },
            viewRender: function (view, element) {
                //加载工作时间
                view.calendar.businessHourGenerator.rawComplexDef =[
                        {   dow: [ 5 ], // 周一 - 周四
                            start: '10:00', // 上午10点开始
                            end: '18:00', // 下午18点结束
                        },{   dow: [ 3 ], // 周一 - 周四
                            start: '10:00', // 上午10点开始
                            end: '18:00', // 下午18点结束
                        }
                    ]
            }
        });

        /*  语言变化*/

        // build the locale selector's options
        $.each($.fullCalendar.locales, function(localeCode) {
            $('#locale-selector').append(
                $('<option/>').attr('value', localeCode)
                    .prop('selected',
                        localeCode == initialLocaleCode)
                    .text(localeCode));
        });

        // when the selected option changes, dynamically change the calendar option
        $('#locale-selector').on(
            'change',
            function() {
                if (this.value) {
                    //切换语言后重新渲染日期插件
                    $('#calendar').fullCalendar('option', 'locale',
                        this.value);
                }
            });
    });


    /**
     * 重新渲染事件到日程控件上
     * https://www.helloweba.net/javascript/454.html#fc-EventSourceObject
     */
    function render(){
        var json = '{"state":"ok","msg":"操作成功！","calendar":[{"id":1121,"title":"3344-  辅导辅导13 [ 津津]","start":"2018-11-22 15:30:00","remarks":"课程:3344-  辅导辅导13<br>校区:中心校区<br>教室:花样教室<br>教师:米桂<br>时间:15:30:00-16:00:00<br>课时:1<br>上课学员姓名:津津","end":"2018-11-22 16:00:00"}]}';
        var s =  $.parseJSON( json );
        $('#calendar').fullCalendar('renderEvents', s.calendar, true);//批量渲染事件到日程控件上
    }

    /**
     * 移除日程插件上的事件
     */
    function destory(){
        $("#calendar").fullCalendar('removeEvents');
    }

    /*工作是时间重新渲染  如果放到初始化时间中  events : function(start, end,timezone, callback) {}中，那么需要设置定时延迟渲染
    * 工作时间每月可能不同，所以需要一个月一个月的刷新，在  events : function(start, end,timezone, callback) {}这里根据时间渲染工作时间，那么
    * 如果直接写这个方法，那么他就会在初始化整体框架的时候，渲染这个工作时间，可能整体框架没有加载完成，就渲染，这时候渲染的就是不准确的，所以，我们延迟去渲染，等整体框架
    * 加载完成后采取渲染，这样才会准确
    * */
    function businessHours(){
        var businesshours = {
            dow: [ 0 ], // 周一 - 周四
            start: '10:00', // 上午10点开始
            end: '18:00', // 下午18点结束
        }
        $('#calendar').fullCalendar('option', 'businessHours', businesshours);
    }

    /*重新渲染原来的事件ajax获取的数据，这里就等于是重新把fullcalendar重新渲染了*/
    function reRender(){
        $("#calendar").fullCalendar('refetchEvents')
    }

    /*时间格式化函数*/
    Date.prototype.Format = function (fmt) { // author: meizz
        var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
            "S": this.getMilliseconds() // 毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</html>